<template>
  <left>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人中心</span>
      </div>
      <div class="text item" v-for="item in leftMune" :key="item.id">
        <router-link :to="{ name: item.name }" :style="item.fontColor">{{item.title}}</router-link>
        <el-divider class="my-divider"></el-divider>
      </div>
      <div class="text item">
        <a @click="logout">退出登录</a>
      </div>
    </el-card>
  </left>
</template>

<script>
  export default {
    data() {
      return {
        leftMune: [
          {
            name: 'personal',
            title: '个人资料',
          },
          {
            name: 'password',
            title: '重置密码',
          },
          {
            name: 'appointment',
            title: '我的订单',
          },
          {
            name: 'commodityOrders',
            title: '我的兑换',
          },
          {
            name: 'servicesComment',
            title: '我的评价',
          },
          {
            name: 'leaves',
            title: '我的留言',
          },
        ],
        fontColor: 'color: #c9a97c'
      }
    },
    created(){
      this.initColor()
    },
    methods: {
      // 获取路径
      getHash() {
        return window.location.hash.substring(2); // 去掉前面的'#'和'/'
      },
      // 通过路径与路由名称匹配添加样式
      initColor() {
        const hash = this.getHash()
        for(const item of this.leftMune) {
          if (hash == item.name) {
            item.fontColor = this.fontColor
          }
          if (hash.startsWith(item.name + "-add")) {
            item.fontColor = this.fontColor
          }
          if (hash.startsWith(item.name + "-edit")) {
            item.fontColor = this.fontColor
          }
          if (hash.startsWith(item.name + "-details")) {
            item.fontColor = this.fontColor
          }
        }
      },
      async logout() {
        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      },
    }
  }
</script>
